<template>
  <div class='header'>
    <div class="container">
      <div><el-icon>
        <router-link to="/mytrip">
          <Back />
        </router-link>
      </el-icon></div>
      <span>行程详情</span>
    </div>
  </div>

  <ul>
    <li v-for="trip in trips" :key="trip.id">
      <el-card class="tripCard" style="line-height: 2;">
        <p>行程路线：{{ trip.route }}</p>
        <p>出发时间：{{ trip.departureTime }} &nbsp;&nbsp; (今天)</p>
        <p style=" width: 80%;display: flex; justify-content: space-between;">
          <span>{{ trip.num }}人/{{ trip.seats }}座</span>
          <span>{{ trip.price }}元/位</span>
        </p>
        <ul>
          <li v-for="passenger in passengers" :key="passenger.id">
            <hr class="line-only">
            <p>乘客姓名：{{ passenger.name }}</p>
            <p style="display: flex; justify-content: space-between;">
              乘客电话：{{ passenger.phone }}
              <el-button><el-icon style="margin-right: 10px;">
                <Phone />
              </el-icon>联系乘客</el-button>
            </p>
            <p>乘客位置：{{ passenger.location }}</p>
          </li>
        </ul>

      </el-card>
    </li>
  </ul>

  <div class="tripButton">
    <span style=" width: 65%;display: flex; justify-content: space-between;">
      <button @click="setOut">出发</button>
      <button>取消行程</button>
    </span>

  </div>
</template>


<script setup>
import { onMounted, ref } from 'vue'
import {useCounterStore} from '@/stores/counter'
import { useRouter } from 'vue-router';

const router = useRouter()
const store = useCounterStore();  // 使用 Vuex Store

console.log(store.skipData);
const trips = ref([
  {
    id: 1,
    route: '阿克苏------阿拉尔',
    departureTime: '2023-05-01 08:00:00',
    num: 4,
    seats: 10,
    price: 50,
    status: '已完成',
  }
])
const passengers = ref([
  {
    id: 1,
    name: '三哥',
    phone: 17233732731,
    location: '塔大小西门'
  },
  {
    id: 2,
    name: '金哥',
    phone: 17629347718,
    location: '美食广场南门'
  },
])

const setOut =() => {
  router.push("/action")
}


</script>

<style lang='less' scoped>
.header {
  background-color: #BDDCFF;
  height: 60px;
  line-height: 60px;
  color: #495e77;
  padding: 0 12px;

}

.container {
  width: 60%;
  display: flex;
  justify-content: space-between;
}

.tripCard {
  margin: 20px 10px 20px 10px;
}

.line-only {
  width: 40%;
  border: none;
  /* 去除默认的边框 */
  border-top: 1px solid black;
  /* 添加一条横线 */
  margin-top: 25px;
  /* 增加横线与上方元素之间的距离 */
  margin-bottom: 25px;
  /* 增加横线与下方元素之间的距离 */
}

.tripButton {
  margin: 70px 70px 0 130px;
}</style>